<!--
 * @Author: Bennent_G
 * @Date: 2024-12-23 16:14:13
 * @LastEditTime: 2025-01-17 11:07:09
 * @Description:
-->
<template>
	<div class="dept-container">
		<div class="dept-tree page-header-container">
			<a-button type="primary" size="small" @click="openModal('add', 0)">新增部门</a-button>
			<a-divider style="margin: 8px 0;"></a-divider>
			<a-directory-tree v-model:expandedKeys="expandedKeys" v-model:selectedKeys="selectedKeys" :showIcon="true"
				:tree-data="treeData" @select="handleNodeSelect">
				<template #title="{ title, key }">
					<div class="custom-treenode-title">
						<span>{{ title }}</span>
						<a-space :size="8">
							<!-- <a-tooltip>
								<template #title>新增</template>
								<PlusSquareOutlined style="color:#108ee9;" @click="openModal('add', key)" />
							</a-tooltip> -->
							<a-tooltip>
								<template #title>编辑</template>
								<EditOutlined style="color:orange;" @click.stop="openModal('edit', key)" />
							</a-tooltip>
							<a-tooltip>
								<template #title>删除</template>
								<DeleteOutlined style="color:#f5222d;"/>
							</a-tooltip>
						</a-space>
					</div>
    			</template>
			</a-directory-tree>
		</div>
		<div class="dept-content">
			<DeptUserList :deptId="selectDeptId" />
		</div>
	</div>
	<!--  -->
	<DeptFormModal v-model="modalVisible" :id="currentId" :treeData="treeData" :title="isEdit ? '编辑部门' : '新增部门'"/>
</template>

<script setup lang="ts">
import type { TreeProps } from 'ant-design-vue';
import { ref, onMounted } from 'vue';
import { DeleteOutlined, EditOutlined } from '@ant-design/icons-vue';
import { fetchDeptTree } from '@/apis/admin/setting';
import DeptUserList from "@/components/admin/dept/DeptUserList.vue";
import DeptFormModal from "@/components/admin/dept/DeptFormModal.vue";

const expandedKeys = ref < string[] > (['0-0', '0-1']);
const selectedKeys = ref < string[] > ([]);
const treeData =ref<typeof TreeProps['treeData']>([]) ;
const getDeptTree = () => {
	fetchDeptTree<typeof TreeProps['treeData']>().then((res) => {
		treeData.value = res.data;
	});
};
onMounted(() => {
	getDeptTree();
});

const selectDeptId = ref<string|number>('');
const handleNodeSelect = (selectedKeys: string[]) => {
	selectDeptId.value = selectedKeys[0];
};

// modal
const modalVisible = ref<boolean>(false);
const isEdit = ref<boolean>(false);
const currentId = ref<number | string>(0);
const openModal = (type: string, id: number | string) => {
	isEdit.value = type === 'edit';
	modalVisible.value = true;
	currentId.value = id;
};

</script>

<style scoped lang="scss">
.dept-container {
	display: grid;
	grid-template-columns: minmax(456px, 1fr) 4fr;
	gap: 16px;
	height: 100%;

	.dept-tree {
		padding: 16px 24px;
		:deep(.ant-tree) {
			.ant-tree-treenode {
				.ant-tree-switcher {
					display: inline-flex;
					align-items: center;
				}
				.ant-tree-node-content-wrapper {
					.ant-tree-iconEle {
						display: none;
					}
					.custom-treenode-title {
						display: inline-flex;
						width: 100%;
						align-items: center;
						justify-content: space-between;
					}
				}
			}
		}
	}
}
</style>
